<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>新闻后台管理模板</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
    <!-- bootstrap 3.0.2 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Morris chart -->
    <link href="css/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- Date Picker -->
    <link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
    <!-- fullCalendar -->
    <!-- <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> -->
    <!-- Daterange picker -->
    <link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- bootstrap wysihtml5 - text editor -->
    <!-- <link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> -->
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <!-- Theme style -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />



    <style type="text/css">

    </style>
</head>

<body class="skin-black">
    <!-- header logo: style can be found in header.less -->
    <header class="header">
        <a href="index.html" class="logo">
                首页
            </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="navbar-right">
                <ul class="nav navbar-nav">
                    <!-- User Account: style can be found in dropdown.less -->

                </ul>
            </div>
        </nav>
    </header>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->

        <aside class="right-side">
            <!-- Main content -->
            <section class="content">
                <!-- Main row -->
                <h3 class="text-center">发布新闻</h3>
                <form class="form-horizontal" role="form" id="formData" method="POST">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">新闻标题：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="title" placeholder="请输入标题" name="title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">内容：</label>
                    </div>
                    <div class="form-group">
                        <input type="textarea" class="" name="content" id="editor">

                        </input>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                <input type="file" name="file" id="file"><br>
                                <input type="authorId" name="authorId" id="hid">
                          </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="button" class="btn btn-default" id="announce" value="发布"></input>
                        </div>
                    </div>
                </form>
                <!-- row end -->
            </section>
            <!-- /.content -->
            <div class="footer-main">
                Copyright &copy GaoLainan, 2020
            </div>
        </aside>
        <!-- /.right-side -->

    </div>
    <!-- ./wrapper -->


    <style>
        .myEdit {
            height: 500px;
        }
        
        .ck-editor__editable {
            min-height: 400px;
        }
    </style>

    <!--CKEdit的start-->
    <script src="js/ck-editor/ckeditor.js" type="text/javascript" />

    <!-- jQuery 2.0.2 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>

    <!-- jQuery UI 1.10.3 -->
    <script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <!-- daterangepicker -->
    <script src="js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>

    <script src="js/plugins/chart.js" type="text/javascript"></script>

    <!-- datepicker
        <script src="js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>-->
    <!-- Bootstrap WYSIHTML5
        <script src="js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>-->
    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
    <!-- calendar -->
    <script src="js/plugins/fullcalendar/fullcalendar.js" type="text/javascript"></script>

    <!-- Director App -->
    <script src="js/Director/app.js" type="text/javascript"></script>

    <!-- Director dashboard demo (This is only for demo purposes) -->
    <script src="js/Director/dashboard.js" type="text/javascript"></script>

    <!-- Director for demo purposes -->


    <script>
        // 隐藏发布人的id
        $("#hid").hide()

        $(document).ready(function() {


            $("#announce").click(function() {
                console.log($("#hid").val())
                var formData = new FormData($("#formData")[0]);
                $("#editor").val(myEditor.getData())
                console.log($("#editor").val())
                $.ajax({
                    url: 'http://localhost:8080/attachment/upload',
                    type: 'POST',
                    data: formData, // 上传formdata封装的数据
                    dataType: 'JSON',
                    cache: false,
                    processData: false, // jQuery不要去处理发送的数据
                    contentType: false, // jQuery不要去设置Content-Type请求头
                    success: function(data) { //成功回调
                        console.log(data);
                    }
                });
                /*$.ajax({
                    type: "POST",
                    url: "http://localhost:8080/attachment/upload",
                    data: {
                        news: {
                            title: $("#titleName").val(),
                            content: myEditor.getData(),
                            authorId: 1
                        },
                        file: ''
                    },
                    //dataType: "multipart/form-data",
                    success: function(data) {
                        console.log(data)
                        if (data) {
                            alert("发布成功")
                        }

                    }
                });*/
            })
        })
    </script>


    <script>
        var myEditor = null;
        window.onload = function() {
            ClassicEditor
                .create(document.querySelector("#editor"), {
                    alignment: {
                        options: ['left', 'right']
                    },
                    toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'heading']
                })
                .then(editor => {
                    myEditor = editor;
                })
                .catch(error => {
                    console.error(error);
                });

            if (sessionStorage.getItem("userId") == null) {
                alert("请登录！")
                window.location.href = 'login.html'
            }

            $("#hid").val(sessionStorage.getItem("userId"))
        }
    </script>


    <script type="text/javascript">
        $(function() {
            "use strict";
            //BAR CHART
            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }, {
                    label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }]
            };
            new Chart(document.getElementById("linechart").getContext("2d")).Line(data, {
                responsive: true,
                maintainAspectRatio: false,
            });

        });
        // Chart.defaults.global.responsive = true;
    </script>
</body>

</html>